<style lang = "less" scoped>
    .home {
        height: 100%;
        padding-top: 70px;
        .main {
            height: 100%;
        }
    }
    .header {
        width: 100%;
        height: 70px;
        background-color: #ffffff;
        overflow: hidden;
        border-bottom: 1px solid #f8f8f8;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1999;
        .logo {
            width: 241px;
            height: 70px;
            font-size: 27px;
            font-weight: normal;
            font-stretch: normal;
            color: #222222;
            line-height: 70px;
            text-align: left;
            text-indent: 28px;
            border-right: 1px solid #f8f8f8;
            float: left;
        }
        .user-item {
            float: left;
            .option-icon {
                width: 34px;
                height: 34px;
                background-color: #d8d8d8;
                border-radius: 50%;
                margin: 18px 10px 18px 40px;
                float: left;
                display: block;
            }
            /* .user-name{
                float: left;
                height: 20px;
                margin: 25px 0;
                font-size: 14px;
                color: #666666;
                position: relative;
            }
            .user-name::before{
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-top-color: #ccc;
                top: 8px;
                right: -18px;
                cursor: pointer;
                z-index: 0;
            } */
            .select {
                display: inline-block;
                margin: 15px 0px;
                position: relative;
                vertical-align: middle;
                padding: 0;
                overflow: hidden;
                background-color: #fff;
                color: #666666;
                font-size: 14px;
                text-shadow: none;
                border-radius: 4px;
                transition: box-shadow 0.25s ease;
                z-index: 2;
                max-width: 100px;
                /deep/.el-input__inner{
                    border: none;
                }
                /deep/.el-input__icon:before {
                    content: "";
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border: 5px solid transparent;
                    border-bottom-color: #ccc;
                    cursor: pointer;
                }
            }
        }
        .nav {
            margin-left: 60px;
            float: left;
            div {
                float: left;
                margin-right: 70px;
                padding: 25px 5px 21px;
                height: 70px;
                font-size: 16px;
                color: #222222;
                /* border-bottom: 2px solid #ffffff; */
                cursor: pointer;
            }
            .active {
                color: #409eff;
            }
        }
        .user-center {
            float: right;
            height: 70px;
            padding-right: 30px;
            .user-name {
                float: right;
                height: 20px;
                margin: 25px 0;
                font-size: 14px;
                color: #666666;
                position: relative;
            }
            .user-name:before {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-top-color: #ccc;
                top: 8px;
                right: -18px;
                cursor: pointer;
                z-index: 0;
            }
            .icon {
                width: 34px;
                height: 34px;
                background-color: #d8d8d8;
                border-radius: 50%;
                margin: 18px 10px 18px 40px;
                float: right;
                display: block;
            }
        }
    }
    .el-select-dropdown__item{
    margin: 5px 0;
    .el-image.option-icon{
        width: 34px;
        border-radius: 50%;
        /*height: 34px;*/
    }
}
</style>
<template>
    <div class="home">
        <div class="header">
            <div class="logo">logo</div>
            <div class="user-item">
                <img :src="activeOption.avatr_url" class="option-icon">
                <!-- select -->
                <el-select v-model="activeOption.nickname" placeholder="请选择" class="select" @change="changeActiveOption">
                    <el-option v-for="(item,key) in options" :key="key" :label="item.nickname" :value="key">
                    <el-image :src ="item.avatr_url" class="option-icon"></el-image>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.nickname }}</span>
                    </el-option>
                </el-select>
            </div>
            <div class="nav">
                <div :class="[activeIndex=='star'?'active':'']" @click="handleClick('star')">观星台</div>
                <div :class="[activeIndex=='fans'?'active':'']" @click="handleClick('fans')">粉丝互动</div>
            </div>
            <div class="user-center">
                <div class="user-name">{{activeOption.nickname}}</div>
                <img :src="activeOption.avatr_url" class="icon">
            </div>
        </div>
        <div class="main">
            <el-scrollbar>
                <router-view />
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
        options:  [],
        activeOption:{},
        activeIndex: 'star'
        }
    },
    mounted(){
        this.$nextTick(()=>{
            const locHanderActive = sessionStorage.getItem('handerActive');
            if(locHanderActive){
                this.activeIndex = locHanderActive;
            }else{
                sessionStorage.setItem('handerActive',this.activeIndex);
            }
            this.getUserList();
        })
        
    },
    methods: {
        // 获取用户列表数据
        getUserList() {
            this.$request(this.$api.home.dav_list, {}).then(data => {
                this.options = []
                // data.map((item,index)=>{
                //     console.log(item)
                //     this.options[item.dav_id]=item;
                // });
                this.options = data;
                this.activeOption = data[0]
            }).catch(err => {
                console.log(err);
            })
        },
        // 改变账号
        changeActiveOption(res){
            this.activeOption = this.options[res];
            console.log(this.activeOption,this.options)

            this.$store.commit('SET_ACTIVE_ID', this.activeOption)
        },
        handleClick(key){
            this.activeIndex = key;
            sessionStorage.setItem('handerActive',key);
            if(this.activeMenu === key){
                window.location.reload();
            }else{
                this.$router.push({name:key});
            }
        }
    }
}
</script>

